<template>
  <div :style="{ padding: '0 15px' }">
    <el-table
      :height="`calc(100vh - 64px - var(--container-margin)* 4 -  var(--el-tabs-item-height) - 32px - 2px)`"
      :data="getuserquestion"
      style="width: 100%"
      @row-click="clickRow"
      :row-class-name="rowClassName"
    >
      <template v-slot:empty>
        <el-empty
          image="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/ojSass-empty.png"
        />
      </template>
      <el-table-column
        show-overflow-tooltip
        prop="createdAt"
        label="提交时间"
        width=""
        :formatter="({ createdAt }) => TimeYH(createdAt)"
      />
      <el-table-column prop="resultdata" label="提交结果" width="250">
        <template #default="{ row, column }">
          <div class="submission-table">
            <span v-if="row.type === '代码'">
              <el-tag
                effect="dark"
                v-text="ALLTYPE[row.resultdata ? row.resultdata : 'WT'][1]"
                :class="
                  'bg-' + ALLTYPE[row.resultdata ? row.resultdata : 'WT'][1]
                "
              >
              </el-tag>
            </span>
            <span v-else>{{ row.resultdata ? row.resultdata : "错误" }}</span>
            &nbsp;&nbsp;&nbsp;
            <span v-if="Array.isArray(row.resultdataarr)">
              <span
                :style="{ display: 'inline-block' }"
                v-for="(v, key) in acgroup(row.resultdataarr)"
                :key="'a_' + key"
              >
                <span effect="dark" :class="ALLTYPE[v[0]][1]"
                  >{{ v[0] }}:{{ v[1] }}&nbsp;</span
                >
              </span>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="runParam"
        label="运行参数"
        :formatter="getRunParam"
      >
        <!-- <template #default="{ row, column }">
          <el-text>{{ getRunParam(row) }}
          </el-text>
        </template> -->
      </el-table-column>
    </el-table>
    <el-pagination
      class="pager"
      size="default"
      :page-size="20"
      :total="count"
      @current-change="(r) => (offset = 20 * (r - 1))"
      layout="total, prev, pager, next"
      :current-page="Math.floor(offset / 20) + 1"
    >
    </el-pagination>
  </div>
</template>

<script setup lang="ts">
import { countBy, pairs } from "underscore";
import { computed, onMounted, ref, watch } from "vue";
import { useStore } from "vuex";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { ALLTYPE } from "@/util/jianchatime";
import { TimeYH } from "../../../util/time";

import { Storekey } from "../../../interface";

import { asyncselectuserquestion } from "../../../api";

const emit = defineEmits<{
  (e: "update:submissionRow", value: Studycodemodel.Iuserquestion): void;
  (e: "update:showCaseDetail", value: boolean): void;
}>();

type P = {
  isSub: boolean;
  user: Studycodemodel.Iuser;
  ID?: number;
  question: Studycodemodel.Iquestion;
};
interface Iusertest extends Studycodemodel.Iquestiontestcasesuser {}
const prop = defineProps<P>();

const userquestion = ref<Studycodemodel.Iuserquestion[]>([]);
const offset = ref(0);
const count = ref(0);
const store = useStore(Storekey);
const user = computed(() => {
  return store.state.user;
});

const selectedRow = ref<Studycodemodel.Iuserquestion>();
// 提交记录未点击 或者二次点击取消 控制右侧内容
function clickRow(
  row: Studycodemodel.Iuserquestion,
  column: any,
  event: Event
): void {
  if (selectedRow.value !== row) {
    selectedRow.value = row;
    emit("update:submissionRow", row);
    emit("update:showCaseDetail", true);
    return;
  }
  emit("update:showCaseDetail", false);
  selectedRow.value = {};
}

function rowClassName({
  row,
  rowIndex,
}: {
  row: Studycodemodel.Iuserquestion;
  rowIndex: number;
}): string {
  let className = "cursor-pointer";
  if (selectedRow.value == row) {
    className = "highlight-row cursor-pointer";
  }
  return className;
}

watch(
  () => prop.isSub,
  (v) => {
    if (v) {
      start();
    }
  }
);

watch(
  () => offset.value,
  (v) => {
    start();
  }
);

onMounted(() => {
  start();
});

watch(
  () => prop.ID,
  () => {
    start();
  }
);

const getuserquestion = computed(() => {
  return userquestion.value;
});
async function start() {
  if (user.value && prop.ID) {
    const data = await asyncselectuserquestion({
      _offset: offset.value,
      userid: user.value.ID,
      _limit: 20,
      questionid: prop.ID,
      _order: "ID",
      _sortable: "DESC",
    });
    userquestion.value = data.rows;
    count.value = data.count;
    // 更新传入 submission 的 submissionRow  默认第一条
    emit("update:submissionRow", data.rows[0] || {});
  }
}

defineExpose({
  start,
  count,
  defaultSelectedRow(v: Studycodemodel.Iuserquestion | undefined) {
    selectedRow.value = v;
  },
});

// ==========
function acgroup(data?: Array<keyof Studycodemodel.IALLTYPE>) {
  if (Array.isArray(data)) {
    const c = countBy(data, (a) => {
      return a;
    });
    return pairs(c);
  }
  return [];
}
function getRunParam(row: Studycodemodel.Iuserquestion): string {
  let gccoptimize = row.gccoptimize ? `${row.gccoptimize}/` : "";
  let rowLanguage = row.language
    ?.toLowerCase()
    .replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
  rowLanguage = rowLanguage !== "Cpp" ? rowLanguage : "C++";
  return gccoptimize + rowLanguage;
}
</script>

<style scoped>
.submission-table .el-tag {
  width: 90px;
  border-radius: 4px;
  border: none;
}

.pager {
  margin: var(--container-margin);
  margin-right: 0;
  float: right;
}

/* ===================old======================= */
.table pre {
  margin-bottom: 0px;
}

h5 {
  font-size: 16px;
}

.txt {
  padding-bottom: 12px;
}

.txt strong {
  line-height: 36px;
  padding-right: 10px;
  font-size: 32px;
  display: inline-block;
}

.div-hr {
  height: 41px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.div-hr div {
  height: 1px;
  background-color: cornsilk;
}

.question-collapse {
  margin-bottom: 40px;
}

.question-collapse img {
  line-height: 40px;
}

.tjsj {
  line-height: 32px;
  text-align: end;
}

.tjsj span {
  display: inline-block;
  padding-right: 10px;
  color: var(--color-606266);
}

.text-hide {
  padding-left: 10px;
  padding-top: 6px;
}

.classtz {
  width: 166px;
  height: 166px;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0px 3px 6px rgba(141, 141, 141, 0.16);
}

.classtz .div-1-1 {
  border-top-width: 10px;
  border-top-style: solid;
}

.co9A97AD {
  color: #9a97ad;
}

.div-1-1 .text-left {
  font-size: 24px;
  margin-top: 10px;
  padding-left: 10px;
  color: #909399 !important;
}

.div-1-1 .text-uppercase {
  font-size: 38px;
  display: inline-block;
  margin-bottom: 10px;
}

.transition {
  transition: 1s all ease;
  display: none;
  color: #fff;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
}

.div-1-1 span {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: #c0c4cc;
}

.context1 {
  border: 1px solid #d9d9d9;
}

.list-group-item {
  border-left: none;
  border-top: none;
  border-bottom: none;
  border-right: 1px solid #d9d9d9;
  cursor: pointer;
  background-color: #f5f5f5;
}

.list-group-item:hover {
  background-color: #fff;
}

.list-group-horizontal {
  width: 100%;
  border-left: 1px solid #d9d9d9;
  border-top: 1px solid #d9d9d9;
  border-bottom: none;
  border-right: 1px solid #d9d9d9;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  overflow-x: auto;
}

.testcase .pre {
  border-color: #d9d9d9;
  border: 1px solid #d9d9d9;
  padding: 12px;

  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
    0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.testcase pre {
  border: none;
  background-color: #f5f5f5;
}

.h33 {
  font-size: 18px;
  color: var(--color-43);
  margin-top: 24px;
  margin-bottom: 12px;
}

.ex {
  margin-bottom: 12px;
}

.ex1 {
  font-size: 12px;
  color: #8c8c8c;
}

.form-xl {
  border: 1px solid #d9d9d9;
  /* Depth 4 */

  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
    0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
  border-radius: 2px;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.el-form .row {
  --bs-gutter-x: 24px;
}

.el-icon-1 {
  width: 24px;
  height: 24px;
  background-color: var(--color-cheng);
  line-height: 24px;
  color: #fff;
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
}

.el-icon-2 {
  width: 24px;
  height: 24px;
  background-color: #d9d9d9;
  line-height: 24px;
  color: #fff;
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
}

.disbutton {
  border: none;
  background-color: #f5f5f5;
  --el-button-hover-color: "#000";
  --el-button-hover-background-color: #f5f5f5;
  height: 28px;
  line-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 12px;
  padding-right: 12px;
}
</style>

<style>
.question-collapse .is-active {
  background-color: var(--color-d2e4ff) !important;
  border-bottom-width: 0;
}

.question-collapse .el-collapse-item__content {
  padding-bottom: 0 !important;
}
</style>
